import React, { Component } from 'react';
import { Form, InputNumber, DatePicker, Select, Input, Button, Tooltip, Space } from 'antd'
import {
    SearchOutlined, SyncOutlined
} from '@ant-design/icons';
import './style.less'
import PropTypes from 'prop-types'
import _ from 'lodash'

const { RangePicker } = DatePicker;
const { Option } = Select

export default class TheQueryForm extends Component {
    constructor(props) {
        super(props)
        this.formRef = React.createRef()
        this.state = {
            layout: {
                labelCol: { span: 10 },
                wrapperCol: { span: 14 },
            },
            formOption: []
        }
    }

    componentDidMount() {
        this.getOption()
    }

    async getOption() {
        let arr = this.props.option
        for (let i = 0; i < arr.length; i++) {
            let item = arr[i]
            if (item.hasOwnProperty('api') && item.api !== '') {
                let api = item.api
                await api({ ...item.params }).then(res => {
                    if (res.code === 0) {
                        res.data.map(v=>{
                            return item.options.push(v) 
                        })
                    }
                })
            }
            if (item.hasOwnProperty('initialValues')) {
                this.onSetDefault({
                    [item.field]: item.initialValues
                })
            }
        }
        this.setState({
            formOption: arr
        })
    }

    onSearch() {
        let values = this.getValues()
        console.log(values);
        this.props.onGetValues(values)
    }

    onReset() {
        this.formRef.resetFields()
        let values = this.getValues()
        this.props.onReset(values)
    }

    onSetDefault(values) {
        this.formRef.setFieldsValue({
            ...values
        });
        // console.log(values, 'values', this.formRef);
        // setTimeout(() => {
            // console.log(values, 'values', this.formRef.getFieldsValue());

        // }, 3000)
        return this.getValues()
    }

    getValues() {
        const values = this.formRef.getFieldsValue()
        _.forIn(values, (v, k) => {
            if (v === undefined || v === null || v === '') {
                delete (values[k])
            }
        })
        return values
    }

    createItem = (item) => {
        let dom
        switch (item.type) {
            case 'Input':
                dom =
                    <Input key={item.field + "-Input"} allowClear style={{ width: 260 }} placeholder={item.placeholder} />
                break;

            case 'InputNumber':
                dom = <InputNumber key={item.field + "InputNumber"} allowClear style={{ width: 260 }}
                    placeholder={item.placeholder} />
                break;
            case 'Select':
                dom = (
                    <Select allowClear key={item.field + "Select"} style={{ width: 260 }} placeholder={item.placeholder} defaultValue={item.defaultValue}>
                        {
                            item.hasOwnProperty('options') ? item.options.map(option => <Option key={option.value}
                                value={option[item.value] || option['value']}>{option[item.txt] || option['label']}</Option>) : null
                        }
                    </Select>
                )
                break;
            case 'RangePicker':
                dom = <RangePicker key={item.field + "RangePicker"} allowClear style={{ width: 260 }} disabledDate={item.disabledDate} onChange={item.onChange} />
                break;
            case 'DatePicker':
                dom = <DatePicker key={item.field + "DatePicker"} allowClear style={{ width: 260 }} disabledDate={item.disabledDate} />
                break;
            case 'InputGroupSSelect':
                dom = (
                    <Input.Group compact>
                        <Form.Item
                            name={[item.field, 'Select']}
                            noStyle
                        >
                            <Select
                                placeholder={'请选择'}
                                key={item.field + "Select"}
                                style={{
                                    width: 120,
                                }}
                            >
                                {
                                    item.hasOwnProperty('options') ? item.options.map(option => <Option
                                        key={option.value}
                                        value={option[item.value] || option['value']}>{option[item.txt] || option['label']}</Option>) : null
                                }
                            </Select>
                        </Form.Item>
                        <Form.Item
                            name={[item.field, 'Input']}
                            noStyle
                        >
                            <Input
                                key={item.field + "Input"}
                                style={{
                                    width: 'calc(100% - 120px)',
                                }}
                                placeholder={item.placeholder}
                                allowClear
                            />
                        </Form.Item>
                    </Input.Group>
                )
                break;
            case 'InputGroupDSelect':
                dom = (
                    <Input.Group compact>
                        <Space style={{ display: 'flex' }} align="baseline">
                            <Form.Item
                                name={[item.field, 'SelectL']}
                                noStyle
                            >
                                <Select
                                    key={item.field + "SelectL"}
                                    style={{
                                        width: 130,
                                    }}
                                    placeholder={item.placeholder}
                                >
                                    {
                                        item.hasOwnProperty('options') && item.options.length > 0 ? item.options[0].map(option =>
                                            <Option
                                                key={option.value}
                                                value={option[item.value] || option['value']}>{option[item.txt] || option['label']}</Option>) : null
                                    }
                                </Select>
                            </Form.Item>
                            <Form.Item
                                name={[item.field, 'SelectR']}
                                noStyle
                            >
                                <Select
                                    key={item.field + "SelectR"}
                                    style={{
                                        width: 130,
                                    }}
                                    placeholder={item.placeholder}
                                >
                                    {
                                        item.hasOwnProperty('options') && item.options.length > 1 ? item.options[1].map(option =>
                                            <Option
                                                key={option.value}
                                                value={option[item.value] || option['value']}>{option[item.txt] || option['label']}</Option>) : null
                                    }
                                </Select>
                            </Form.Item>
                        </Space>
                    </Input.Group>
                )
                break;
            default:
                break;
        }
        return dom
    }

    render() {
        const { formOption } = this.state
        const { children, option, show, disabled } = this.props
        return (
            <div className='queryForm'>
                <Form
                    labelWrap
                    ref={(ref) => this.formRef = ref} layout={'inline'}
                    style={{ width: '100%', marginBottom: 12, display: show ? 'flex' : 'none' }}
                >
                    {
                        formOption && formOption.map(item => {
                            return (
                                <Tooltip title={item.tooltip}>
                                    <Form.Item key={item.field} className='form-col'
                                        name={item.field}
                                        label={item.label}
                                        rules={item.rules}
                                    >
                                        {this.createItem(item)}
                                    </Form.Item>
                                </Tooltip>
                            )
                        })
                    }
                    <Form.Item>
                        <div className='form-btns'>
                            <Button type="primary" icon={<SearchOutlined />} shape="default"
                                onClick={() => this.onSearch()} disabled={disabled}>
                                搜索
                            </Button>
                            <Button htmlType="button" icon={<SyncOutlined />} onClick={() => this.onReset()}>
                                重置
                            </Button>
                        </div>
                    </Form.Item>
                    {children}
                </Form>

            </div>
        );
    }
}
TheQueryForm.propTypes = {
    option: PropTypes.array

}
TheQueryForm.defaultProps = {
    option: []
}
